<template>
  <div>
    <van-list v-model="loading" :finished="finished" finished-text="已展示所有评论" @load="onLoad">
      <van-cell title="全部评论" />
      <comment-item :is-show-btn='btn' v-for='(item  ,index )  in commentList' :key="index" @reply-click="$emit('reply-click',$event)" :comment='item' />
    </van-list>
  </div>
</template>
<script>
import { getComments } from '@/api/comment.js'
import CommentItem from './comment-item'
export default {
  name: 'commentlist',
  components: {
    CommentItem
  },
  props: {
    commentList: {
      type: Array,
      default: () => []
    },
    articleId: {
      type: [Object, String, Number]
    },
    type: {
      type: String,
      default: 'a'
    },
    btn: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      loading: false,
      finished: false,
      limit: 10,
      offset: null
    }
  },
  methods: {
    async onLoad() {
      const { data: res } = await getComments({
        type: this.type,
        source: this.articleId,
        offset: this.offset,
        limit: this.limit
      })
      const result = res.data.results
      this.commentList.push(...result)
      this.loading = false
      this.$emit('update-total-count', res.data.total_count)
      if (result.length) {
        this.offset = res.data.last_id
      } else {
        this.finished = true
      }
    }
  }
}
</script>
<style lang="less" scoped>
</style>
